<template>
  <div class="orderquery">
    <el-form :inline="true" :model="orderqueryData" ref="orderqueryData"  class="demo-form-inline">
      <el-form-item label="导游姓名" style="width: 25%" label-width="83px">
        <el-input
          v-model="orderqueryData.userName"
          placeholder="请输入内容"
          clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="导游工号" style="width: 25%" label-width="83px" prop="userNumber" :rules="[
          { required: true, message: '内容不能为空' },
          { type: 'number', message: '内容必须为数字值' },
        ]">
        <el-input
          v-model.number="orderqueryData.userNumber"
          placeholder="请输入内容"
           autocomplete="off"
           clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="时间查询" style="width: 45%" label-width="83px">
        <div class="block">
          <el-date-picker
            v-model="orderqueryData.orderDate"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            type="daterange"
            placement="bottom-end"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
      </el-form-item>
      <el-form-item style="width: 25%">
        <el-button type="primary" @click="unionQueryFun">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="unionqueryArr"
      border
      style="width: 100%"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column prop="userName" label="导游姓名" width="303">
      </el-table-column>
      <el-table-column prop="userNumber" label="导游工号" width="302">
      </el-table-column>
      <el-table-column prop="orderAmount" label="派遣单量" width="302">
      </el-table-column>
      <el-table-column prop="personAmount" label="游客人数" width="300">
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="orderqueryData.currentPage"
        :page-sizes="[10, 15, 20, 20]"
        :page-size="orderqueryData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totals"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { unionquery } from "@network/api/order.js";
export default {
  data() {
    return {
      orderqueryData: {
        currentPage: 1,
        orderDate: [],
        pageSize: 10,
        userName: "",
        userNumber: "",
      },
      unionqueryArr: [],
      totals: 0,
    };
  },
  methods: {
    async unionQueryList() {
      let resunionquery = await unionquery(this.orderqueryData);
      console.log("resunionquery", resunionquery);
      this.unionqueryArr = resunionquery.data.data.conjunctiveList;
      this.totals = resunionquery.data.data.total;
    },
    unionQueryFun() {
      this.unionQueryList();
    },
    handleSizeChange(val) {
      this.orderqueryData.currentPage = 1;
      this.orderqueryData.pageSize = val;
      this.unionQueryList();
    },
    handleCurrentChange(val) {
      this.orderqueryData.currentPage = val;
      this.unionQueryList();
    },
  },
  created() {
    this.unionQueryList();
  },
};
</script>

<style lang="scss" scoped>
.orderquery {
  background-color: #fff;
  padding: 40px 20px;
}
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
</style>